<div class="field-wrapper" [zeprideAuthority]="zeprideAuthorityData">
    <ng-container
        *ngIf="componentData.extends && componentData.extends.fields && componentData.extends.fields.length;else noDataTpl">
        <ng-container *ngIf="dataList && dataList.length;else defaultTpl">
            <ng-container *ngTemplateOutlet="dataTpl;"></ng-container>
        </ng-container>
    </ng-container>
</div>

<ng-template #defaultTpl>
    <div class="default-table-wrapper">
        <nz-table class="table" #table [nzData]="dataList">
            <thead>
                <tr>
                    <th class="header" *ngIf="componentData.extends.serialNoType">序号</th>
                    <th class="header" *ngFor="let field of componentData.extends.fields">{{field?.name}}</th>
                </tr>
            </thead>
            <tbody></tbody>
        </nz-table>
        <nz-pagination class="default-pagination" [nzPageIndex]="1" [nzTotal]="10" [nzPageSize]="20"
            [nzShowTotal]="defaultTotalTpl">
        </nz-pagination>
    </div>
</ng-template>
<ng-template #defaultTotalTpl>
    共计<span class="total-txt">0</span>条
</ng-template>

<ng-template #noDataTpl>
    <nz-table class="table">
        <thead>
            <tr>
                <th class="header">第一列</th>
                <th class="header">第二列</th>
                <th class="header">第三列</th>
            </tr>
        </thead>
        <tbody></tbody>
    </nz-table>
</ng-template>

<ng-template #dataTpl>
    <div>
        <div style="display: flex; justify-content: flex-end;">
            <nz-upload [nzAction]="uploadUrl" [nzHeaders]="uploadService.headers" 
                (nzChange)="handleChange($event)" nzListType="" [nzAccept]="fileType">
                <button nz-button nzType="primary" [nzLoading]="uploading">导入</button>
            </nz-upload>
        </div>
        <nz-table class="table" #dataTable [nzData]="dataList" [(nzPageIndex)]="queryParams.pageIndex"
            [(nzPageSize)]="queryParams.countOfPage" [nzTotal]="queryParams.total" (nzPageIndexChange)="getData()"
            (nzPageSizeChange)="getData(true)" [nzLoading]="loading" [nzFrontPagination]="false" nzShowSizeChanger
            [nzShowTotal]="totalTemplate" nzTableLayout="fixed" [nzScroll]="{y: '500px'}">
            <thead>
                <tr>
                    <th class="header" *ngIf="componentData.extends.serialNoType" nzAlign="center">序号</th>
                    <th nzAlign="center" class="header" *ngFor="let field of componentData.extends.fields">
                        {{field?.name}}
                    </th>
                    <th nzAlign="center" class="header" nzAlign="center" *ngIf="dataSource.dataType == 'workflowOrder'">
                        当前状态
                    </th>
                    <th nzAlign="center" class="header" style="width: 222px;"
                        *ngIf="dataSource.dataType != 'dataChangeLog'">操作
                    </th>
                    <th nzAlign="center" class="header" *ngIf="componentData.extends.needRead">
                        阅读
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let item of dataTable.data;let index = index">
                    <td *ngIf="componentData.extends.serialNoType" nzAlign="center">
                        {{index+1}}
                    </td>
                    <td nzEllipsis *ngFor="let field of componentData.extends.fields"
                        [nzAlign]="field.alignment?field.alignment:'center'" [nzLeft]="field.fixed?true:false">
                        <!-- <div [innerHTML]="item[field.bindField]"></div> -->
                        <span nz-tooltip [nzTooltipTitle]="item[field.bindField]">{{item[field.bindField]}}</span>
                    </td>
                    <td nzEllipsis nzAlign="center" *ngIf="dataSource.dataType == 'workflowOrder'">
                        <ng-container *ngIf="item.status">
                            <span *ngIf="item.status == 'closed'" style="color: #FF4C52;">已终止</span>
                            <span *ngIf="item.status == 'complete'" style="color: #6ED268;">已完成</span>
                            <span *ngIf="item.status == 'suspend'">已暂停</span>
                        </ng-container>
                        <ng-container *ngIf="!item.status">
                            <span nz-tooltip [nzTooltipTitle]="item.curNodeNames ? item.curNodeNames.split(',').join(' ') : ''" style="color: #FF9500;">
                                {{item.curNodeNames ? item.curNodeNames.split(',').join(' ') : ''}}
                            </span>
                        </ng-container>

                    </td>
                    <td nzAlign="center" *ngIf="dataSource.dataType != 'dataChangeLog'">
                        <a class="operate-btn" nz-button nzType="link" (click)="tableEvent('view', item)">查看</a>
                        <ng-container *ngIf="item.status != 'closed' && item.status != 'complete'">
                            <a class="operate-btn" *ngIf="canEdit" nz-button nzType="link"
                                (click)="tableEvent('edit', item)">编辑</a>
                            <a class="operate-btn" *ngIf="canDelete" nz-button nzType="link" nzDanger
                                (click)="tableEvent('delete', item, index)">删除</a>
                        </ng-container>
                    </td>
                    <td nzAlign="center" *ngIf="componentData.extends.needRead">
                        <a class="operate-btn" nz-button nzType="link" (click)="readStart(item, index)">开始</a>
                        <a class="operate-btn" nz-button nzType="link" nzDanger (click)="readStop(item)">取消</a>
                    </td>
                </tr>
            </tbody>
        </nz-table>
    </div>

</ng-template>

<ng-template #totalTemplate let-total>
    共计<span class="total-txt">{{total ? total : 0}}</span>条
</ng-template>